<template>
  <div>
    <el-container>
      <el-container>
        <el-header>
          <el-button class="bt1" @click="downloadImg()">全部下载</el-button>
        </el-header>
        <el-main>
          <el-aside>
            <el-button v-for="img in imgs" :key="img">
              <el-image
                :src="VUE_APP_BASE_API + img"
                fit="cover"
                @click="getSrc(img)"
              ></el-image>
            </el-button>
          </el-aside>
          <div class="mian_right">
            <!-- <el-image :src="VUE_APP_BASE_API + img" fit="cover" slot="error">
            </el-image> -->
            <image-preview :src="img" />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import service from "@/utils/request";
import { getQRCodeGenerator } from "@/api/commodity/qrCode";
export default {
  data() {
    return {
      VUE_APP_BASE_API: process.env.VUE_APP_BASE_API,
      //生成二维码
      imgs: [],
      img: "",
      productList: [],
    };
  },
  created() {
    const QRCode = localStorage.getItem("QRCode");
    const rowData = JSON.parse(QRCode);
    this.productList = rowData;
    getQRCodeGenerator(this.productList).then((response) => {
      this.imgs = response.data;
      this.img = this.imgs[0];
    });
  },
  methods: {
    getSrc(src) {
      this.img = src;
    },
    /** 下载按钮操作 */
    async downloadImg() {
      service
        .post(
          "/downloadQRCode",
          { imagePaths: this.imgs },
          { responseType: "blob" }
        )
        .then((response) => {
          // 下载压缩包
          const url = window.URL.createObjectURL(new Blob([response]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", "images.zip");
          document.body.appendChild(link);
          link.click();
        })
        .catch((error) => {
          // 处理错误
          console.log("错误：" + error);
        });
    },
  },
};
</script>
<style>
.el-header {
  background-color: #b3c0d1;
}

.el-aside {
  background-color: #d3dce6;
  text-align: center;
  height: 800px;
  margin: -20px;
}

.el-main {
  background-color: #e9eef3;
  text-align: center;
}
.bt1 {
  float: right;
  margin: 12px;
}
.el-button + .el-button {
  margin-top: 10px;
  margin-right: 10px;
}
.mian_right {
  position: absolute;
  top: 10%;
  left: 40%;
}
.mian_right .el-image__inner {
  width: 500px;
}
</style>